<template>
  <div class="chart">
    <!-- 标题部分 -->
    <van-nav-bar title="市场数据" @click-left="$router.back()">
      <template #left>
        <div class="lefticon">
          <span class="iconfont">&#xe637;</span>
        </div>
      </template>
    </van-nav-bar>
    <!-- 地址职位下拉部分 -->
    <van-dropdown-menu>
      <van-dropdown-item :title="city" ref="city">
        <van-search
          background="#f7f4f5"
          v-model="cityvalue"
          shape="round"
          placeholder="请输入搜索关键词"
        />
        <van-index-bar>
          <template v-for="(value, key, index) in indexList">
            <van-index-anchor class="myindex" :index="key" :key="index" />
            <van-cell
              v-for="(item, index) in value"
              :title="item[0]"
              :key="index"
              @click="chooseCity(item[1], item[0])"
            />
          </template>
        </van-index-bar>
      </van-dropdown-item>
      <van-dropdown-item :title="job" ref="job">
        <van-search
          v-model="myjob"
          shape="round"
          placeholder="请输入关键字"
          @search="onSearch"
          @input="findjob"
        ></van-search>
        <van-cell
          v-for="(item, index) in newjobList"
          :key="index"
          :title="item"
          @click="choosejob(item)"
        ></van-cell>
      </van-dropdown-item>
    </van-dropdown-menu>
    <!-- 图标区域 -->
    <!-- 工资收入 -->
    <div class="mychart mychartone">
      <div class="item salary">
        <span class="space">区间</span>
        <span class="percent">占比</span>
        <span class="notice">近一年 15025 份样本 / 可信度：高</span>
        <van-cell title="工资收入"></van-cell>
        <canvas id="salary" width="380" height="260"></canvas>
      </div>
      <!-- 工作经验 -->
      <div class="item experience">
        <van-cell title="工作经验"></van-cell>
        <canvas id="experiece" width="380" height="260"></canvas>
      </div>
      <!-- 历年平均工资变化趋势 -->
      <div class="item trend">
        <van-cell title="历年平均工资变化趋势"></van-cell>
        <canvas id="trend" width="380" height="260"></canvas>
      </div>
      <!-- 就业形势 -->
      <div class="item condition">
        <van-cell title="就业形势"></van-cell>
        <canvas id="condition" width="380" height="260"></canvas>
      </div>
      <!-- 说明 -->
      <div class="explain">
        <div class="rela">相关职位比例</div>
        <div><van-icon name="warning-o" />说明</div>
        <p>
          曲线越向上代表市场需求量越大，就业情况越好，反之，代表该类职位需求量较少，该数据由各地招聘网站统计二零，可能因抓取系统稳定性等因素致使数据偏离客观实情，仅供参考
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import F2 from '@antv/f2'
import { chartIndexes, chartStatistics } from '@/api/api.js'
export default {
  data () {
    return {
      myjob: '',
      city: '',
      job: '',
      indexList: [],
      cityvalue: '',
      jobList: [],
      newjobList: [],
      timer: null,
      // 图标数据
      salaryList: [],
      experieceList: [],
      trendList: [],
      conditionList: [],
      currentChart: null,
      average: ''
    }
  },

  created () {
    this.getData()
    this.city = '北京'
    this.job = '技术经理'
    this.getChartData()
  },
  watch: {
    salaryList (newval, oldval) {
      if (newval !== oldval) {
        // 工资收入
        if (this.currentChart) {
          this.currentChart.destroy()
        }
        const data = this.salaryList
        const map = {}
        data.forEach(function (obj) {
          map[obj.name] = obj.percent + '%'
        })

        const chart = new F2.Chart({
          id: 'salary',
          pixelRatio: window.devicePixelRatio,
          padding: [40, 'auto']
        })
        chart.source(data, {
          percent: {
            formatter: function formatter (val) {
              return val + '%'
            }
          }
        })
        chart.tooltip(false)
        chart.legend({
          position: 'right',
          itemFormatter: function itemFormatter (val) {
            return val + '    ' + map[val]
          }
        })
        chart.coord('polar', {
          transposed: true,
          innerRadius: 0.5,
          radius: 0.8
        })

        chart.axis(false)
        chart
          .interval()
          .position('a*percent')
          .color('name', [
            '#73a0fa',
            '#73deb3',
            '#7585a2',
            '#eb7e65',
            '#f7c739'
          ])
          .adjust('stack')

        chart.guide().html({
          position: ['50%', '45%'],
          html: `<div style="width: 250px;height: 10px;text-align: center;" v-if='isaverage'>
      <div style="font-size: 12px;">平均</div>
      <div style="font-size: 12px" id='average'>￥<span id='average'>${this.average}</span></div>
    </div>`
        })

        chart.render()
        this.currentChart = chart
      }
    },
    experieceList (newval, oldval) {
      if (newval !== oldval) {
        const data = this.experieceList
        const chart = new F2.Chart({
          id: 'experiece',
          pixelRatio: window.devicePixelRatio
        })

        chart.source(data)
        chart.tooltip({
          showCrosshairs: true
        })
        chart.scale({
          time: {
            range: [0.05, 0.95]
          },
          tem: {
            tickCount: this.experieceList.length,
            min: 5000
          }
        })

        chart.axis('time', {
          label: function label (text, index, total) {
            const textCfg = {}
            if (index === 0) {
              textCfg.textAlign = 'left'
            } else if (index === total - 1) {
              textCfg.textAlign = 'right'
            }
            return textCfg
          }
        })
        chart.area().position('time*tem')
        chart.line().position('time*tem')
        chart
          .point()
          .position('time*tem')
          .style({
            lineWidth: 1,
            stroke: '#01b8d4',
            fill: '#fff'
          })
        chart.render()
      }
    },
    trendList (newval, oldval) {
      if (newval !== oldval) {
        // const data = this.trendList
        const chart = new F2.Chart({
          id: 'trend',
          pixelRatio: window.devicePixelRatio
        })
        chart.source(this.trendList)
        chart.tooltip({
          showCrosshairs: false
        })
        chart.scale({
          time: {
            range: [0.05, 0.95]
          },
          tem: {
            tickCount: 5,
            min: 5000
          }
        })
        chart.area().position('time*tem')
        chart.line().position('time*tem')
        chart
          .point()
          .position('time*tem')
          .style({
            lineWidth: 1,
            stroke: '#01b8d4',
            fill: '#fff'
          })
        chart.render()
      }
    },
    conditionList (newval, oldval) {
      if (newval !== oldval) {
        const data = this.conditionList
        const chart = new F2.Chart({
          id: 'condition',
          pixelRatio: window.devicePixelRatio
        })
        chart.source(data, {
          month: {
            range: [0.03, 0.95]
          },
          value: {
            tickCount: 5
          }
        })
        chart.axis('month', {
          label: function label (text, index, total) {
            const textCfg = {}
            if (index === 0) {
              textCfg.textAlign = 'left'
            } else if (index === total - 1) {
              textCfg.textAlign = 'right'
            }

            return textCfg
          }
        })
        chart.axis('value', {
          label: function label (text) {
            const textCfg = {}
            if (text <= 0) {
              textCfg.fill = '#1CAA3D'
              textCfg.fontWeight = 'bold'
            }

            return textCfg
          }
        })

        chart.tooltip({
          showCrosshairs: true
        })
        chart
          .area({
            startOnZero: false // 配置 x 轴基线不为 0
          })
          .position('month*value')
          .shape('smooth')
        chart
          .line()
          .position('month*value')
          .shape('smooth')
        chart
          .point()
          .position('month*value')
          .style({
            lineWidth: 1,
            stroke: '#01b8d4',
            fill: '#fff'
          })
        chart.render()
      }
    }
  },
  methods: {
    async getData () {
      const res = await chartIndexes()
      this.indexList = res.data.data
      this.city = this.indexList.B[1][0]
      this.newjobList = this.indexList.B[1][1]
      this.jobList = this.newjobList
      this.job = this.newjobList[0]
    },
    async getChartData () {
      // 获取工资收入数据
      const res1 = await chartStatistics({
        city: this.city,
        position: this.job
      })
      this.salaryList = res1.data.data.percentSalary.map(item => {
        return { name: item.assetType, percent: item.percent }
      })
      this.average = res1.data.data.percentSample

      this.experieceList = res1.data.data.experienceSalary.map(item => {
        return { time: item.info, tem: Number(item.value) }
      })
      this.trendList = res1.data.data.yearSalary.map(item => {
        return { time: item.year.substr(0, 4), tem: Number(item.salary) }
      })
      this.conditionList = res1.data.data.employmentNum.map(item => {
        return { month: item.date, value: Number(item.value) }
      })
    },
    // 职业搜索input事件
    findjob () {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.onSearch(this.myjob)
      }, 600)
    },
    // 职业搜索
    onSearch (val) {
      this.newjobList = this.jobList.filter(item => {
        return item.includes(val)
      })
    },
    // 选择城市点击
    chooseCity (item, city) {
      this.jobList = item
      this.$refs.city.toggle()
      this.city = city
      this.job = this.jobList[0]
      this.getChartData()
    },
    // 选择职位点击
    choosejob (item) {
      this.$refs.job.toggle()
      this.job = item
      this.getChartData()
    }
  }
}
</script>

<style lang="less" scoped>
.chart {
  .iconfont {
    font-size: 30px;
  }
  .myindex {
    background: #f7f4f5;
  }
  .mychart {
    .item {
      .area {
        width: 100%;
        height: 240px;
        background-color: pink;
      }
    }
    /deep/.van-cell {
      font-size: 17px;
    }
    .explain {
      padding: 0 12px;
      font-size: 12px;
      color: #666;
      position: relative;
      .rela {
        position: absolute;
        height: 37px;
        width: 211px;
        transform: rotate(-90deg);
        left: -74px;
        top: -155px;
        background-color: #fff;
        text-align: center;
        line-height: 44px;
        font-size: 16px;
      }
    }
  }
  .mychartone {
    position: relative;
    color: #999;
    font-size: 16px;
    .space {
      position: absolute;
      left: 250px;
      top: 69px;
      z-index: 1;
    }
    .percent {
      position: absolute;
      z-index: 100;
      left: 300px;
      top: 69px;
      z-index: 1;
    }
    .notice {
      position: absolute;
      z-index: 100;
      left: 71px;
      top: 250px;
      z-index: 1;
    }
  }
}
</style>
